Ф 


Пишем компоненты, которые Emm, 
захочется переиспользовать 


Антон Крьлов 


Авито 


Frontend 
Conf 2022 


« 


Кто я 


Frontend developer 
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Кто я 


Frontend developer 


Люблю архитектурить и 
развлекаться за ноутбуком по 
ночам 
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Кто я 


Frontend developer 


Люблю архитектурить и 
развлекаться за ноутбуком по 
ночам 


» Бывший тимлид 
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Кто я 


Frontend developer 


Люблю архитектурить и 


развлекаться за ноутбуком по 
ночам 


» Бывший тимлид 


» Делаю профили B Avito 
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Идеальный компонент 


avito.tech 


Идеальный компонент 


> Который He стали писать 


avito.tech 


Идеальный компонент 


> Который не стали писать 


> На который есть дока и тесть 
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Идеальный компонент 


> Который He стали писать 
» На который есть дока и тесты 


> При использовании не нужно 
думать 
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Идеальный компонент 


> Который He стали писать 
» На который есть дока и тесты 


» При использовании не нужно 
думать 


» Подходит под все сценарии 
использования 
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= 
Ф 
n 
2 
> 
© 
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График работы программиста 


Сложность 


Ну его, пойду ютубчик 
Еи < 


ком изи, кажется надо посмотреть ютубчик 


Время 


avito.tech 13 


Нет тестов 


avito.tech 


Нет тестов 


» Скорее всего разработчик He 
подумал о том, какего компонент 
будет использоваться извне 
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Нет тестов 


» Скорее всего разработчик He 
подумал о том, какего компонент 
будет использоваться извне 


» Даже если подумал, возможно, 
он не подумал как потом зтот 
компонент расширять 


avito.tech 


Компонент делает 
СЛИШКОМ МНОГО 
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Компонент делает 
СЛИШКОМ МНОГО 


» Декомпозируйте, пожалуйста 
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Over engineering 
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Over engineering 


>  useEffect вместо useCallback 
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Over engineering 


>  useEffect вместо useCallback 


> RxJS для всего 
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Over engineering 


>  useEffect вместо useCallback 
> RxJS для всего 


» Лишние слои абстракции 


avito.tech 
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Over engineering 


>  useEffect вместо useCallback 
> RxJS для всего 
» Лишние слои абстракции 


» Пока вы все не прочитаете, не 
поймете, как оно работает 


avito.tech 
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Неконсистентное 


состояние 
СКК ME 
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Неконсистентное 
состояние 


Что не так?) 


ехроп 
< 
onChange^ 4 


errorText?: 


avito.tech 


validation?: (value: 
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Неконсистентное 
состояние 


avito.tech 


export 
< 
опСпапде» 4 


validationProps?: 4 
errorText: 
validation: (value: 


^ 


) 


Неконсистентное 
состояние 


Решение: single prop - 
single logic 


avito.tech 


export 
< 
опСпапде» 4 


validation?: (value: 
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Отображение 
на флагах 


avito.tech 


return isCreateForm ? < 


Отображение 
на флагах 


Если уж делаете, то 
сделайте хотя бь 
маппинг :) 


avito.tech 


forms = { 
createForm: CreateForm, 
editForm: EditForm 


le 
( 
formName: forms; 
) 
Form = (| formName У ) ->4 
Component = forms[formName]; 
return < [> 
} 
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TextField({ 
withoutlmplicitFocus, 
disabled, 
onFocus, 
hasLowerCase, 
hasAutoSelectAfterSubmit, 
onChange: onChangeProp, 

hasAutoSelect = | 

т ши selector = DEFAULT. SELECTOR, 
inputSize = "I", 
priority = 0, 
dataE2e = selector І DEFAULT SELECTOR, 
dataTestld = selector І DEFAULT SELECTOR, 
handleEnter = selectOnEnter, 
transformValueOnChange = transformToUppercase, 
onKeyDown < поор, 
useSuperFocus = useSuperFocusDefault, 
useFocusAfterError 2 useFocusAfterErrorDefault, 
useSuperFocusOnKeydown = useSuperFocusOnKeydownDefault, 
useSuperFocusAfterDisabled = useSuperFocusAfterDisabledDefault, 
someJSX, 


‚ ...textFieldProps 
avito.tech y 50 


Props hell 
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Требования 


Бабки 


Бизнес 
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a —. 
| 


Красиво M 
yno6Ho 


Дизайнерь 


Просто и понятно 


Разработчики 


35 


Требования 


„ Й — 
| 


Бабки 


Просто и понятно 


Красиво и 
| удобно 


Бизнес Дизайнерь Разработчики 
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Характеристики 


А Button L3 Uploader ГІ Table 


Гибкость 
1C 


Коробочность Зависимость 


Явность Функциональность 
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TextField ({ 
withoutlmplicitFocus, 
disabled, 
onFocus, 
hasLowerCase, 
hasAutoSelectAfterSubmit, 
onChange: onChangeProp, 
Какую часть можно hasAutoSelect = , 
переопределить selector = DEFAULT SELECTOR, 
inputSize = "I", 
priority = 0, 
dataE2e = selector І DEFAULT SELECTOR, 
dataTestld = selector І DEFAULT SELECTOR, 
handleEnter = selectOnEnter, 
transformValueOnChange = transformToUppercase, 
onKeyDown < поор, 
useSuperFocus = useSuperFocusDefault, 
useFocusAfterError 2 useFocusAfterErrorDefault, 
useSuperFocusOnKeydown = useSuperFocusOnKeydownDefault, 
useSuperFocusAfterDisabled = useSuperFocusAfterDisabledDefault, 
someJSX, 


‚ ...textFieldProps 
avito.tech y 36 


Гибкость 


Коробочность 


Простота внешнего АР! 


avito.tech 


( 
entryUrl: 
} 
Table = ({ entryUrl }: ) => {< 
{ rows, headers ) = useDataFromUrl(entryUrl); 
} 
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Коробочность 


Простота внешнего АР! 
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PrimaryButton = (( children y: ) 
return ( 
< variant='primary'>{children}</ 
) 
) 


( 
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Зависимость 
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f 


а! 


в 
, 


еее | 
E 
X [ll 


EI 


А. — 
= 
NN 

NN 


, 
сс 
Д 


4 


`i 
el Ж 
layout | —Ó 
{| config-provider | 


ssage 
av hooks | 
/ 


| 


Зависимость 


» Менее гибко 
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f 
| 


/ 


а! 


в 
, 


ка| 
а 


КП 


АВ. — 
= 
NN 

NN 


, 
сс 
Д 


4 


`i 
el Ж 
layout | —Ó 
{| config-provider | 


ssage 
av hooks | 
/ 


| 
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Зависимость 


» Менее гибко 


» Более хрупко :) 


avito.tech 


A IJ 
з 


pagination "pagination || 
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Явность 


Необходимы ли знания 
контекста или бизнес 
логики? 


avito.tech 


} 


PrimaryButton = (( children }: ) 


return ( 


) 


variant='primary'>{children}</ 
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Явность 


PrimaryButton = (( children }: ) 
return ( 
< variant='primary'>{children}</ 
Необходимы ли знания } ) 
контекста или бизнес 
NOTARAM PrimaryButton = ({ children }: ) 
return ( 
< color='red50'>{children}</ 
) 
} 


avito.tech 


Явность 


PrimaryButton = (( children }: ) 
return ( 
< variant='primary'>{children}</ 
Необходимы ли знания } ) 
контекста или бизнес 
и PrimaryButton = (( children }: ) 
return ( 
< color='red50'>{children}</ 
) 
} 
PrimaryButton = (( children }: ) 
return ( 
< color='#f00'>{children}</ 
) 
) 


avito.tech 


Явность 


Необходимы ли знания 
контекста или бизнес 
логики? 


avito.tech 


Avatar = (| isShop, src У 
return ( 


< 


aspectRatio={isShop ? 3/2:1/1 


SICZ4SIC 


Avatar = (| shape, src |: 
return ( 


< 


aspectRatio={shape === 
src={src 


rectangle' ? 3/2':1/1' 
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function BasicForm() 4 


Featu res const form = useForm({ 


onSubmit(values) { 
alert(JSON.stringify(values, null, 2)) 
console.log( values', values) 


^ 


children: [ 
Количество ( 
возможностей, которое 


предоставляет нам label: First Name’, 
компонент пате: firstName, 


component: ‘Input’ 
value: ", 
component: 'Submit', 
text: ‘submit’, 


: return «Form form={form} /> 
avito.tech ) 


UI kit 
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[L3 UI-kit 
Гибкость 
10 
8 
Коробочность 
Явность 


Зависимость 


фун кциональность 
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Ul kit П UI-kit 


Гибкость 
10 
> Ограничиваем возможность 8 
переопределения стилей на 
овне темь 
i Коробочность Зависимость 
Явность Функциональность 


avito.tech 48 


Ul kit П UI-kit 


Гибкость 
10 

> Ограничиваем возможность 8 

переопределения стилей на 

овне темы 

a Коробочность 
> Zero-dependency, чтобы весила 

поменьше 

Явность 


avito.tech 


Зависимость 


фун кциональность 
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Ul kit П UI-kit 


Гибкость 
10 


> Ограничиваем возможность 8 
переопределения стилей на 


овне темы 
a Коробочность 


> Zero-dependency, чтобы весила 
поменьше 


» Должно быть очень простое и 


явное АР! 


Явность 


avito.tech 


Зависимость 


фун кциональность 
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Небольшое 
количество проектов 


O Небольшое количество проектов 
Гибкость 


10 


Коробочность Зависимость 


Явность Функциональность 


avito.tech 5 


Небольшое 
количество проектов 

Г1 Небольшое количество проектов 
> Максимальный уровень Гибибёть 


переопределения под 10 
бизнес логику 


Коробочность Зависимость 


Явность Функциональность 
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Небольшое 
количество проектов 


O Небольшое количество проектов 


> Максимальный уровень Гибибёть 
переопределения под 10 
бизнес логику 


> Функциональности 
побольше, чтобы делать Коробочность Зависимость 
меньше на уровне проектов 


Явность Функциональность 
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Небольшое 
количество проектов 


O Небольшое количество проектов 


> Максимальный уровень Гибибёть 
переопределения под 10 
бизнес логику 


> Функциональности 
побольше, чтобы делать Коробочность Зависимость 
меньше на уровне проектов 


» АРІ может быть не очень 
явным, в пользу большей 
функциональности 


Явность Функциональность 
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Локальные 
компоненты 
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А Локальные компоненты 


Гибкость 
10 
8 
5 
Коробочность z Зависимость 
Явность Функциональность 
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Локальные 
компоненты 


№» Могут быть максимально не 
гибкими, ведь мы можем их 
в любой момент поправить 
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А Локальные компоненты 


Коробочность 


Явность 


Гибкость 
10 


8 
5 
3 


Зависимость 


фун кциональность 
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Локальные 


(1 Локальные компоненты 
№» Могут быть максимально не Гибкость 
гибкими, ведь мы можем их 10 
B любой момент поправить в 
> Функциональности K 6 > 3 
побольше, чтобы достичь рома ша та 3 авари 
максимальной 
консистентности поведения 
на уровне проекта 
Явность Функциональность 
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Локальные 
компоненты 


» 


MoryT быть максимально He 
гибкими, ведь мы можем их 
в любой момент поправить 


Функциональности 
побольше, чтобы достичь 
максимальной 
консистентности поведения 
на уровне проекта 


АРІ может быть совсем не 
явньм, завязанньм на 
конкретную бизнес логику 


avito.tech 


А Локальные компоненты 


Гибкость 
10 
8 
5 
Коробочность z Зависимость 
Явность Функциональность 
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Как мы можем влиять на характеристики? 
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Пишите тесты 


avito.tech 


Dependency 
injection 


avito.tech 


О UI-kit 
Гибкость 
10 
8 
Коробочность Зависимость 
Явность Функциональность 
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Dependency 


AN A ГЇ UI-kit 
injection 
Гибкость 
10 
» Делаем гибче 4 
Коробочность Зависимость 
Явность Функциональность 
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Dependency 
injection 


» Делаем гибче 


» Делаем независимее 
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А UI-kit 


Гибкость 
10 А 


8 


Коробочность — Зависимость 


Явность Функциональность 
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Dependency 
injection 


» Делаем гибче 
» Делаем независимее 


> С использованием DI легче 
тестировать (меньше мокать) 


avito.tech 


А UI-kit 


Гибкость 
10 А 


8 


Коробочность — Зависимость 


Явность Функциональность 
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Injection ма 
props 


avito.tech 


}: 


TextField({ 
withoutlmplicitFocus, 
disabled, 
onFocus, 
hasLowerCase, 
hasAutoSelectAfterSubmit, 
onChange: onChangeProp, 
hasAutoSelect = | 
selector = DEFAULT SELECTOR, 
inputSize = "I", 
priority = 0, 
dataE2e = selector І DEFAULT SELECTOR, 
dataTestld = selector І DEFAULT SELECTOR, 
handleEnter = selectOnEnter, 
transformValueOnChange = transformToUppercase, 
onKeyDown < поор, 
useSuperFocus = useSuperFocusDefault, 
useFocusAfterError 2 useFocusAfterErrorDefault, 
useSuperFocusOnKeydown = useSuperFocusOnKeydownDefault, 
useSuperFocusAfterDisabled = useSuperFocusAfterDisabledDefault, 
someJSX, 
...textFieldProps 
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TextField({ 
withoutlmplicitFocus, 
disabled, 


Injection via disabled 


D ro р 5 hasLowerCase, 
hasAutoSelectAfterSubmit, 
onChange: onChangeProp, 
hasAutoSelect = | 
selector = DEFAULT SELECTOR, 
inputSize = "I", 
priority = 0, 
dataE2e = selector І DEFAULT SELECTOR, 
dataTestld = selector І DEFAULT SELECTOR, 
transformValueOnChange = transformToUppercase, 
onKeyDown = поор, 
useSuperFocus = useSuperFocusDefault, 
useFocusAfterError 2 useFocusAfterErrorDefault, 
useSuperFocusOnKeydown = useSuperFocusOnKeydownDefault, 
useSuperFocusAfterDisabled = useSuperFocusAfterDisabledDefault, 
someJSX, 


‚ ...textFieldProps 
avito.tech y 66 


> Функции 


TextField({ 
withoutlmplicitFocus, 
disabled, 


Injection via disabled 
pro Ds hasLowerCase, 


hasAutoSelectAfterSubmit, 
onChange: onChangeProp, 
hasAutoSelect = | 

selector = DEFAULT SELECTOR, 


» Фун KUNN inputSize = п 
priority = 0, 
> Хуки dataE2e = selector | DEFAULT SELECTOR, 


dataTestld = selector І DEFAULT SELECTOR, 
handleEnter = selectOnEnter, 
transformValueOnChange - transformToUppercase, 


onKeyDown = поор, 

useFocusAfterError 2 useFocusAfterErrorDefault, 
useSuperFocusOnKeydown = useSuperFocusOnKeydownDefault, 
useSuperFocusAfterDisabled = useSuperFocusAfterDisabledDefault, 
someJSX, 


‚ ...textFieldProps 
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function TextField({ 
| n lectio n Via withoutImplicitFocus, 
J disabled, 

onFocus, 
hasLowerCase, 
hasAutoSelectAfterSubmit, 
onChange: onChangeProp, 
hasAutoSelect < true, 
Функции selector = DEFAULT SELECTOR, 
inputSize = "I", 
priority = 0, 
testProps: { 

dataE2e = selector || DEFAULT. SELECTOR, 
Объекты dataTestld = selector І DEFAULT. SELECTOR, 
}, 
handleEnter = selectOnEnter, 
transformValueOnChange = transformToUppercase, 
onKeyDown = поор, 
someJSX, 
...textFieldProps 


y: Props) {} 


props 


Хуки 
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Injection ма 
context 


> Функции 
> Хуки 


> Объекты 
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import React from "react"; 
import ( useForm, FormProvider, useFormContext ) from "react- 
hook-form"; 


export default App() 1 
methods < useForm(); 
onSubmit = data => console.log(data); 


return ( 
< ...methods!' > 
< onSubmit={methods.handleSubmit(onSubmit)}> 
< /> 
< type="submit" /> 
</ > 
); 
} 
NestedInput() 4 


{ register | = useFormContext(); // retrieve all hook 
methods 
return < ...Fegister("test")) />; 


} 
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Injection ма 
context 


Функции 
Хуки 
Объекты 


Autowiring 


avito.tech 


import 4 provider, inject } from “react-ioc” 


( 


users = observable.map« | >(); 
posts = observable.map« | >(); 


} 
( 


(inject dataContext: ; 


@action 
createPost(user: )4 
post = Post({ id: uniqueld() }); 
.dataContext.posts.set(post.id, post); 
return post; 
} 
} 


@provider( ) 


render() 4 


} 
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Injection ма 
context 


Функции 
Хуки 
Объекты 


Autowiring 


avito.tech 


import ( uselnstance ) from "react-ioc"; 


МуВийоп = props => 4 
postService = uselnstance( ); 


геїигп < onClick={() => postService.createPost({})}>Ok</ 


} 


V 


DSL like подход 


О UI-kit 
Гибкость 
10 
8 
Коробочность Зависимость 
Явность Функциональность 
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DSL like подход 


О UI-kit 
Гибкость 
10 
» Делаем коробочнее в 
Коробочность Зависимость 
Явность Функциональность 
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DSL like 
подход 


Строго ограничиваем 
возможности 
конфигом 


avito.tech 


function BasicForm() 4 


const form 2 useForm(( 
onSubmit(values) 4 
alert(JSON.stringify(values, null, 2)) 
console.log('values', values) 
}, 
children: | 
( 
label: 'First Мате" 
name: ‘firstName' 
component: ‘Input’, 
value: ", 
}, 
{ : 
component: ‘Submit’, 
text: ‘submit’, 


return «Form form={form} /> 


} 74 


DSL like 
подход 


Строго ограничиваем 
возможности 
конфигом 


Но даем возможность 
заинжектить нужные 
нам компоненть 


avito.tech 


BasicForm() 4 


form = useForm({ 


components: [ 
Input, 
Submit 
| 
) 


return < form={form} / 
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DSL like 
подход 


Или оставляем 
общим только 
поведение 


avito.tech 


import ( useForm ) from "react-hook-form"; 


export default Арр() { 


( register, handleSubmit } = 
useForm({ shouldUseNativeValidation: 
onSubmit = data 


)); 


( console.log(data); }; 
return ( 


onSubmit={handleSubmit(onSubmit)}> 


...egister("firstName", { required: "Please enter your first 
name." })} // custom message 


, 
ls 
> 
1 


< type="submit" /> 
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DSL like 
подход 


Или оставляем 
общим только 
поведение 


Например мы 
хотим сделать 
1000 формочек на 
сайте, и не хотим 
каждьи раз их 
переписывать 


avito.tech 


import ( useForm ) from "react-hook-form"; 


export default App() { 
{ register, handleSubmit } = 

useForm({ shouldUseNativeValidation: НЕ 
onSubmit = data => 4 console.log(data); }; 


return ( 
< onSubmit={handleSubmit(onSubmit)}> 


..register("firstName", { required: "Please enter your first 
name." })} // custom message 


< type="submit" /> 
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MockBa — 2022 


AHTOH Пишите простые и 
Крьлов 


удобнье компоненты 
Frontend developer 
DX anton.krylov322@gmail.com 


©) https:/github.com/pivaszbs/ 
«e @dOrDie 


Голосуйте за доклад 


avito.tech 


Москва — 2022 


Антон 
Крылов 


Ссылка на материалы из доклада 


